<template>
  <el-form ref="form" :rules="rules" style="padding-top: 10px;" :model="form" label-width="80px">
    <el-form-item label="流程名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <!-- <el-form-item label="流程编号" prop="code">
      <el-input v-model="form.code" />
    </el-form-item> -->
    <el-form-item label="绑定菜单" prop="bindMenuList">
      <el-cascader
        v-model="form.bindMenuList"
        style="width: 100%;"
        placeholder="请选择"
        :options="options"
        :props="props"
        collapse-tags
        clearable
        filterable
      />

    </el-form-item>
    <el-form-item label="流程描述" prop="description">
      <el-input v-model="form.description" />
    </el-form-item>
  </el-form>
</template>

<script>
import { sexTypes, bloodTypes } from '@/utils/dicData'
import { getWorkflowBindMenuTree } from '@/api/common'
export default {
  name: 'AddWorkFlow',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      props: {
        label: 'name',
        children: 'nodes',
        value: 'name'
      },
      options: [],
      sexTypes,
      bloodTypes,
      form: {
        'description': '',
        'name': '',
        bindMenuList: []
      },
      rules: {
        name: [
          { required: true, message: '请输入流程名称', trigger: 'change' }
        ],
        bindMenuList: [
          { required: true, message: '请选择绑定菜单名称', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    data: {
      handler(newData, oldData) {
        if (newData.id) {
          this.$nextTick(() => {
            Object.keys(this.form).forEach(key => {
              if (key === 'bindMenuList') {
                this.form[key] = newData.menu.split('-')
              } else {
                const val = newData[key]
                this.form[key] = val
              }
            })
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getTreeList()
  },
  methods: {
    clearChildren(data) {
      data.map(val => {
        if (!val.nodes.length) {
          val.nodes = null
        } else {
          this.clearChildren(val.nodes)
        }
      })
      return data
    },
    validateForm(fn) {
      this.$refs.form.validate((valid) => {
        fn(valid)
      })
    },
    getTreeList() {
      getWorkflowBindMenuTree().then(res => {
        if (res.data.nodes) {
          this.options = this.clearChildren(res.data.nodes)
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
